<template>
	<view v-if="pageShow">
		<view class="" style="padding-bottom: 100rpx;">
			<!-- 轮播图 -->
			<view class="dingwei" v-if="dataAll.images_text">
				<u-swiper :list="dataAll.images_text" circular radius="0" height="290px"></u-swiper>
				<!-- <view class="bofang"></view> -->
				<view class="flexleft icowz">
					<u-icon name="star" size="26" color="#f5f5f5" v-if="dataAll.is_sc==0" @click="collect()"></u-icon>
					<u-icon name="star-fill" size="26" color="#ffa126" v-if="dataAll.is_sc==1"
						@click="collect()"></u-icon>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share">
						<u-icon name="share-square" size="26" color="#f5f5f5"></u-icon>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || H5 -->
					<u-icon name="share-square" size="26" color="#f5f5f5"  @click="sharePoster()" ></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<!-- 课程名称 -->
			<view class="mainpadding ffffff">
				<view class="sanshier xiaohei fonweight">{{dataAll.name}}</view>
				<template v-if="dataAll.kc_attr==3">
					<view class="ershiba xiaohui nofonweight margin_top">开始时间：{{dataAll.start_time_text}}</view>
					<view class="ershiba xiaohui nofonweight margin_top">结束时间：{{dataAll.end_time_text}}</view>
				</template>
				<template v-if="dataAll.kc_attr==2">
					<view class="ershiba xiaohong nofonweight margin_top">秒杀剩余数量：{{Number(dataAll.ms_num) - Number(dataAll.ms_salenum)}}</view>
				</template>
				<template v-if="dataAll.kc_attr==3">
					<view class="ershiba xiaohong nofonweight margin_top">成团条件：{{dataAll.pt_num}}人成团</view>
				</template>
				
			</view>
			<!-- 拼团 -->
			<view class="mainpadding2" v-if="dataAll.kc_attr==3 && ptList.length">
				<view class="mainpadding ffffff radius margin_top" style="box-sizing: border-box;">
					<view class="flexbetween" @click="ptshow = true">
						<view class="sanshier xiaohei">这些人已拼，参与可立即拼成</view>
						<view class="flexright">
							<view class="ershil xiaohuang margin_right1">查看全部</view>
							<u-icon name="arrow-right" color="#F8B900"></u-icon>
						</view>
					</view>
					<view class="xiahuaxian margin_top " v-for="(item,index) in ptList" :key="item.id" v-if="index==0 || index==1">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="dingwei margin_right5">
									<image  v-if="ind==0 || ind==1" v-for="(ite,ind)  in item.groupuser" :key="ite.id" class="touxiags" :src="ite.user.avatar_text" mode="">
									</image>
								</view>
								<view class="flexleft">
									<view class="titletext zhonghei margin_right1 yhxk" v-for="ite in item.groupuser" :key="ite.id" >{{ite.user.nickname}}</view>
								</view>
							</view>
							<view class="xhtbn flexcenter" @click="tzgoum(listid,item.id)">去拼单</view>
						</view>
						<view class="xiaohong smalltext textright">已团{{item.join_num}}人/还差{{Number(item.pt_num)-Number(item.join_num)}}人</view>
					</view>
				</view>
			</view>
			<!-- 课程内容 -->
			<view class="mainpadding ffffff margin_top1">
				<view class="sanshier xiaohei fonweight">课程介绍</view>
				<view class="ershiba xiaohui nofonweight margin_top1">{{dataAll.kc_des}}</view>
			</view>
			<!-- 适用校区 -->
			<view class="mainpadding ffffff">
				<view class="flexbetween margin_top2">
					<view class="">
						<view class="flexleft">
							<view class="dizhilv margin_right1"></view>
							<view class="xiaohei nofonweight ershiba">{{dataAll.cityinfo}}</view>
						</view>
						<view class="xiaohui strongtext nofonweight margin_top1">{{dataAll.address}}</view>
					</view>
					<view class="" v-if="dataAll.userzbfapply && dataAll.userzbfapply.mobile" @click="phone(dataAll.userzbfapply.mobile)">
						<u-icon name="phone-fill" size="20"></u-icon>
						<view class="xiaohui strongtext nofonweight margin_top1">电话</view>
					</view>
				</view>
				<!-- <view class="lvbox margin_top2">
					<view class="ershiba nofonweight xiaohei">校区设施</view>
					<view class="flexleft margin_top1">
						<view class="ershil nofonweight xiaohui margin_right3">校区设施名称</view>
						<view class="ershil nofonweight xiaohui margin_right3">校区设施名称</view>
						<view class="ershil nofonweight xiaohui">校区设施名称</view>
					</view>
				</view>
				<view class="lvbox margin_top2">
					<view class="ershiba nofonweight xiaohei">校区服务</view>
					<view class="ershil nofonweight xiaohui margin_right3 margin_top1">校区服务内容校区服务内容校区服务内容校区服务内容</view>
				</view> -->
			</view>
			<!-- 场馆介绍 -->
			<view class="ffffff mainpadding margin_top1"
				@click="jumpurl('/pages_homepage/changguanjieshao?id=',dataAll.userzbfapply.id)"
				v-if="dataAll.userzbfapply.type==4	">
				<view class="flexbetween">
					<view class="titletext xiaohei fonweight">场馆介绍</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flexbetween margin_top">
					<view class="changdi">
						<!-- <image src="../static/image/system/changdi.png" mode=""></image> -->
						<image :src="dataAll.userzbfapply.logo_text" mode=""></image>
					</view>
					<view class="" style="width: 83%;">
						<view class="titletext xiaohei nofonweight">{{dataAll.userzbfapply.name}}</view>
						<view class="ershil xiaohui nofonweight xiankuan margin_top1">{{dataAll.userzbfapply.des}}
						</view>
					</view>
				</view>
			</view>
			<!-- 教练介绍 -->
			<view class="ffffff mainpadding margin_top1"
				@click="jumpurl('/pages_homepage/jiaolianxq?id=',dataAll.userzbfapply.id)"
				v-if="dataAll.userzbfapply.type==5">
				<view class="flexbetween">
					<view class="titletext xiaohei fonweight">教练介绍</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flexbetween margin_top">
					<view class="changdi">
						<!-- <image src="../static/image/system/changdi.png" mode=""></image> -->
						<image :src="dataAll.userzbfapply.logo_text" mode=""></image>
					</view>
					<view class="" style="width: 83%;">
						<view class="titletext xiaohei nofonweight">{{dataAll.userzbfapply.name}}</view>
						<view class="ershil xiaohui nofonweight xiankuan margin_top1">{{dataAll.userzbfapply.des}}
						</view>
					</view>
				</view>
			</view>
			<!--推荐课程  -->
			<view class="ffffff mainpadding margin_top1">
				<u-tabs :list="list2" lineColor="#1BA95B" @change="changetab" :scrollable="false" :activeStyle="{
					    color: '#333333',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#333333',
								fontWeight: '400',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
				<view class="xiahuaxian margin_top" v-for="item in list" :key="item.id" v-if="listid != item.id">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<view class="strongtext xiaohui nofonweight margin_top2 yhxk">{{item.kc_des}} </view>
							<view class="flexbetween margin_top2">
								<view class="titletext xiaohong fonweight">¥{{item.priceinfo.price}}</view>
								<view class="xiaohongbtnty" v-if="tabsid == 4" @click="tzxq1(4,item.id)">立即砍价</view>
								<view class="xiaolvbtn" v-if="tabsid != 4" @click="tzgoum(item.id)">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="mainpadding ffffff margin_top1" v-if="listpj.length">
				<view class="strongtext margin_top flexright"
					@click="jumpurl('/pages_homepage/yonghupj?type=2&id=',listid)">
					<text>查看全部</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="margin_top xiahuaxian" v-for="item in listpj" :key="item.id">
					<view class="flexbetween ">
						<view class="flexleft">
							<view class="touxiang margin_right2">
								<image :src="item.user.avatar_text" mode=""></image>
							</view>
							<view class="">
								<view class="titletext fonweight xiaohei">{{item.user.nickname}}</view>
								<view class="strongtext nofonweight xiaohui">{{item.createtime_text}}</view>
							</view>
						</view>
						<view class="flexright">
							<u-icon name="star-fill" color="#F8B900" size="22" v-for="ite in item.score"
								:key="ite"></u-icon>
						</view>
						<!-- <u-icon name="star" color="#999999" size="22"></u-icon> -->
					</view>
					<view class="margin_top2 xiaohei ershiba nofonweight">{{item.content}}</view>
					<view class="flexleft flex_wrap">
						<view class="sanshis flexcenter margin_top2" v-for="(ite,inde) in item.images_text" :key="inde">
							<view class="jiaolt">
								<image :src="ite" mode="" @click="lbtpriview(inde,item.images_text)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐机构 -->
			<!-- <view class="ffffff mainpadding margin_top1">
				<view class="flexbetween" @click="tztjjg(2)">
					<view class="sanshier xiaohei fonweight">推荐机构</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="xiahuaxian margin_top" v-for="item in 3">
					<view class="flexbetween">
						<view class="shilitu">
							<image src="../static/image/system/banner1.png" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">XXX课程名称 </view>
							<view class="strongtext xiaohui nofonweight margin_top2">课程名称内容 </view>
							<view class="flexbetween margin_top2">
								<view class="titletext xiaohong fonweight">¥ 500</view>
								<view class="xiaolvbtn">抢购</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 课程详情 -->
			<view class="mainpadding ffffff margin_top1">
				<view class="sanshier xiaohei fonweight">课程详情</view>
				<!-- <view class="ershiba xiaohui nofonweight margin_top1">
					课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</view> -->
				<view class="margin_top2 ">
					<image class="cgtpiam" v-for="(item,index) in dataAll.detail_images_text" :key="index"
						@click="lbtpriview(index,dataAll.detail_images_text)" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb">
			<view class="mainpadding ffffff flexbetween">
				<view class="strongtext xiaohei nofonweight" v-if="dataAll.kc_attr!=5">需支付：
					<text class="xiaohong ershiba fonweight">￥{{dataAll.priceinfo.price}}</text>
				</view>
				<view class="strongtext xiaohei nofonweight" v-if="dataAll.kc_attr==5">需支付：
					<text class="xiaohong ershiba fonweight">{{dataAll.priceinfo.score}}分<text
							v-if="Number(dataAll.priceinfo.price)">+￥{{dataAll.priceinfo.price}}</text></text>
				</view>
				<view class="xiaobtnty" v-if="dataAll.kc_attr==1" @click="tzgoum(listid)">立即购买</view>
				<view class="xiaobtnty" v-if="dataAll.kc_attr==2" @click="tzgoum(listid)">立即秒杀</view>
				<view class="xiaobtnty" v-if="dataAll.kc_attr==3" @click="tzgoum(listid)">立即团购</view>
				<view class="xiaobtnty" v-if="dataAll.kc_attr==4" @click="tzgoum(listid)">继续砍价</view>
				<view class="xiaobtnty" v-if="dataAll.kc_attr==5" @click="tzgoum(listid)">立即兑换</view>
			</view>
		</view>
		<zhangyu-qrcode-poster ref="poster" :title="dataAll.name" :subTitle="dataAll.kc_des" :headerImg="dataAll.image_text"
			price=""></zhangyu-qrcode-poster>
		<u-popup :show="ptshow" @close="ptshow=false" mode="center" round="20" :closeable="true">
			<view class="mainpadding ffffff radius" style="padding-bottom: 50rpx;min-width: 600rpx;">
				<view class="sishi zhonghei fonweight textcenter">可参与的拼单</view>
				<view class="" style="height: 500rpx;overflow: auto;">
					<view class="xiahuaxian margin_top" v-for="(item,index) in ptList" :key="item.id" >
						<view class="flexbetween">
							<view class="flexleft">
								<view class="dingwei margin_right5">
									<image  v-if="ind==0 || ind==1" v-for="(ite,ind)  in item.groupuser" :key="ite.id" class="touxiags" :src="ite.user.avatar_text" mode="">
									</image>
								</view>
								<view class="flexleft">
									<view class="titletext zhonghei margin_right1 yhxk" v-for="ite in item.groupuser" :key="ite.id" >{{ite.user.nickname}}</view>
								</view>
							</view>
							<view class="xhtbn flexcenter" @click="tzgoum(listid,item.id)">去拼单</view>
						</view>
						<view class="xiaohong smalltext textright">已团{{item.join_num}}人/还差{{Number(item.pt_num)-Number(item.join_num)}}人</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				fxshow: false,
				list2: [{
						name: '推荐课程',
						value: 1,
					},
					{
						name: '团购课程',
						value: 3
					},
					{
						name: '砍价课程',
						value: 4
					},
					{
						name: '秒杀课程',
						value: 2
					}
				],
				tabsid: 1,
				listid: "",
				pageShow: false,
				dataAll: {},
				type: 1, //1=正常,2=秒杀,3=团购,4=砍价,5=积分兑换
				list: [],
				listpj: [],
				ewmimg:"",
				userInfo:{},
				ptList:[],//拼团列表
				ptshow:false,
				isLoad:false
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if(options.id){
				this.listid = options.id
			}
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
			}
			console.log(options,"接收的参数");
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); 
				}
				console.log(theRequest,"二维码接收的参数");
				this.listid = options.id ? options.id : (theRequest.id ? theRequest.id :
					0);
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
			}
			// #endif
			
			this.getDetail()
			this.getpj()
			// #ifdef APP-PLUS
			this.getewm()
			// #endif
		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.userinfomsg()
			}
			if(this.isLoad){
				this.getptlist()
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			let _this = this
			return {
				title: this.dataAll.name,
				path: "pages_homepage/kechenggmxq?id=" + this.listid + "&rec_user_id=" + uni.getStorageSync("user_id"),
			}
		},
		// #endif
		methods: {
			getewm() {
				httpRequest.request("/api/user/getCodeImage", 'GET', {
					type_id: this.listid,
					type: 2 //1=场地,2=课程,3=赛事,4=活动,5=商城
				}, false, false, true).then(res => {
					this.ewmimg = res.data.code_image
				})
			},
			sharePoster() {
				//获取带参数二维码
				this.$refs.poster.showCanvas(this.ewmimg)
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			getpj() {
				let _this = this;
				let data = {
					page: 1,
					limit: 2,
					kc_id: this.listid
				}
				let url = '/api/kccl/kcCommentList'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						this.listpj = res.data.data;
					}
				})
			},
			tzxq(type, id) {
				uni.navigateTo({
					url: '/pages_homepage/kechenggmxq?type=' + type + "&id=" + id
				})
			},
			tzxq1(type, id) {
				uni.navigateTo({
					url: '/pages_homepage/miaoshakecxq?type=' + type + "&id=" + id
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			changetab(e) {
				console.log(e);
				this.tabsid = e.value
				this.init()
			},
			init() {
				let _this = this;
				this.list = []
				let data = {
					page: 1,
					limit: 4,
					is_rec: this.tabsid == 1 ? 2 : 1,
					kc_attr: this.tabsid,
					user_zbfapply_id: this.dataAll.user_zbfapply_id
				}
				let url = '/api/kccl/kcIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.list = res.data.data;
				})
			},
			collect() {
				httpRequest.request('/api/kccl/kcCollect', 'GET', {
					kc_id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.is_sc = this.dataAll.is_sc == 1 ? 0 : 1
					}
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getDetail() {
				httpRequest.request('/api/kccl/kcDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					if(res.data.kc_attr==3){
						this.getptlist()
					}
					this.dataAll = res.data
					this.pageShow = true
					this.init()
				})
			},
			getptlist(){
				httpRequest.request('/api/kccl/wanlshopGroupIndex', 'GET', {
					kc_id: this.listid
				}, false, false, false).then(res => {
					this.ptList = res.data
					this.isLoad = true
				})
			},
			// 跳转推荐课程以及机构
			tztjjg(i) {
				uni.navigateTo({
					url: '/pages_homepage/tuijiankg?id=' + i
				})
			},
			userinfomsg() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					uni.hideLoading()
					this.userInfo = res.data
				})
			},
			// 跳转购买订单详情
			tzgoum(id,wanlshop_group_id) {
				this.ptshow = false
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				let smrzstatus = this.returnrztext(this.userInfo.usersmrz)
				if(smrzstatus=="未认证"){
					httpRequest.toast("请先实名认证")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shengfenzrz'
						})
					},1000)
					return false
				}
				if(smrzstatus=="待审核"){
					httpRequest.toast("实名认证审核中，暂时无法购买课程")
					return false
				}
				if(smrzstatus=="认证失败"){
					httpRequest.toast("实名认证失败，请重新提交审核后再重新购买课程")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shenhe'
						})
					},1000)
					return false
				}
				let ly = this.dataAll.kc_attr==3?2:this.dataAll.kc_attr==2?3:1
				if(wanlshop_group_id){
					uni.navigateTo({
						url: '/pages_homepage/kechengdingdanxq?id=' + id+"&wanlshop_group_id="+wanlshop_group_id+"&ly="+ly
					})
				}else{
					uni.navigateTo({
						url: '/pages_homepage/kechengdingdanxq?id=' + id+"&ly="+ly
					})
				}
				
			},
			returnrztext(data){
				if(!data){
					return "未认证"
				}
				// 实名认证状态:1=待审核,2=认证成功,3=认证失败
				if(data.smrz_status==1){
					return "待审核"
				}else if(data.smrz_status==2){
					return "认证成功"
				}else if(data.smrz_status==3){
					return "认证失败"
				}
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xiaolvbtn {
		// width: 112rpx;
		padding: 15rpx 30rpx;
		// height: 56rpx;
		background: #1BA95B;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
.touxiag {
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;

	}

	.touxiags{
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;
	}
	.changdi {
		width: 100rpx;
		height: 100rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.cgtpiam {
		width: 100%;
		border-radius: 16rpx;
	}

	.lvbox {
		padding: 24rpx 20rpx;
		background: #EFFFF6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.xhtbn {
		width: 140rpx;
		height: 55rpx;
		background-color: #FFf;
		border: 2rpx solid #FF9341;
		border-radius: 120rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	page {
		background: #F9F9F9;
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}
	.xiahuaxian:last-child {
		padding-bottom: 0;
		border: none;
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}
</style>